<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>儿童兴趣班-首页</title>
<!--  引入layui的样式  -->
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../css/front/layuiIndex.css">
<!--  背景样式-->
  <link rel="stylesheet" href="../css/front/background.css">
<!-- 购物车样式 -->
  <link rel="stylesheet" href="../css/front/ShoppingCart.css">
</head>
<body>
<!-- 背景动画 -->
<ul class="square">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul class="circle">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  <div class="main-content">
    <!-- ====================== 1. 导航栏模块 ====================== -->
    <ul class="layui-nav layui-fixed">
      <li class="layui-nav-item"><a href="index.html">首页</a></li>
      <li class="layui-nav-item"><a href="combo.html">套餐中心</a></li>
      <li class="layui-nav-item"><a href="AboutUs.html">关于我们</a></li>

      <!-- 头像 -->
      <li class="layui-nav-item" style="float: right;">
        <a>
          <img src="../img/front/headshot.jpg" class="layui-nav-img" >
        </a>
        <dl class="layui-nav-child">
          <dd><a href="PersonalInformation.html">个人信息</a></dd>
          <dd><a href="Login.html">登录</a></dd>
        </dl>
      </li>
    </ul>

    <!-- ====================== 2. 轮播图模块 ====================== -->
    <div class="layui-carousel" id="banner">
      <div carousel-item>
        <div><img src="../img/front/Slideshow0.jpg"></div>
        <div><img src="../img/front/Slideshow1.jpg"></div>
        <div><img src="../img/front/Slideshow2.jpg"></div>
      </div>
    </div>

    <!-- ====================== 3. 课程展示模块 ====================== -->
    <div class="layui-container" style="margin-top: 50px;">
      <h2 class="section-title">课程简介</h2>
      <div class="layui-row layui-col-space30">

        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">

          <div class="layui-card course-card">
            <div class="layui-card-header">美术课程</div>
            <div class="layui-card-body">
              <img src="../img/front/Slideshow0.jpg" style="width:100%">
              <p style="margin-top: 10px;">培养儿童艺术天赋，激发创造力</p>
            </div>
            <div class="layui-card-body">
              价格：<span style="margin-top: 10px;">280￥</span>
              <button type="button" class="layui-btn">
                <i class="layui-icon layui-icon-add-1"></i>
              </button>
            </div>
          </div>
        </div>

        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
          <div class="layui-card course-card">
            <div class="layui-card-header">音乐课程</div>
            <div class="layui-card-body">
              <img src="../img/front/Slideshow0.jpg" style="width:100%">
              <p style="margin-top: 10px;">专业钢琴、小提琴等乐器培训</p>
            </div>
            <div class="layui-card-body">
              价格：<span style="margin-top: 10px;">280￥</span>
              <button type="button" class="layui-btn">
                <i class="layui-icon layui-icon-add-1"></i>
              </button>
            </div>
          </div>
        </div>

        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
          <div class="layui-card course-card">
            <div class="layui-card-header">舞蹈课程</div>
            <div class="layui-card-body">
              <img src="../img/front/Slideshow0.jpg" style="width:100%">
              <p style="margin-top: 10px;">培养优雅气质，提升艺术修养</p>
            </div>
            <div class="layui-card-body">
              价格：<span style="margin-top: 10px;">280￥</span>
              <button type="button" class="layui-btn">
                <i class="layui-icon layui-icon-add-1"></i>
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- ====================== 4. 教师风采模块 ====================== -->
    <div class="layui-container" style="margin-top: 50px;">
      <div class="layui-row">
        <h2 class="section-title">教师风采</h2>
        <div class="teacher-scroll-container">

          <div class="teacher-scroll-wrapper">

            <div class="teacher-card">
              <img src="../img/avatar/emp/1.png">
              <h3>王老师</h3>
              <p>
                美术教育专家，从教15年<br>
                擅长儿童美术教育，注重培养孩子的创造力和审美能力
              </p>
            </div>

            <div class="teacher-card">
              <img src="../img/avatar/emp/2.png">
              <h3>李老师</h3>
              <p>钢琴演奏家，音乐教育10年</p>
            </div>

            <div class="teacher-card">
              <img src="../img/avatar/emp/3.png">
              <h3>张老师</h3>
              <p>少儿舞蹈金牌教师，12年教龄</p>
            </div>

            <div class="teacher-card">
              <img src="../img/avatar/emp/4.png">
              <h3>徐老师</h3>
              <p>少儿打手枪金牌教师，19年教龄</p>
            </div>
            <!-- 第二行 -->
            <div class="teacher-card">
              <img src="../img/avatar/emp/5.png">
              <h3>缪老师</h3>
              <p>
                美术教育专家，从教15年<br>
                擅长儿童美术教育，注重培养孩子的创造力和审美能力
              </p>
            </div>

            <div class="teacher-card">
              <img src="../img/avatar/emp/6.png">
              <h3>谭老师</h3>
              <p>钢琴演奏家，音乐教育10年</p>
            </div>

            <div class="teacher-card">
              <img src="../img/avatar/emp/7.png">
              <h3>查老师</h3>
              <p>少儿舞蹈金牌教师，12年教龄</p>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- ====================== 5. 家长反馈模块 ====================== -->
    <div class="layui-container" style="margin-top: 50px;">
      <h2 class="section-title">家长反馈</h2>
      <div class="layui-row layui-col-space30">

        <div class="layui-col-md4">
          <div class="feedback-card">
            <div class="feedback-avatar">
              <img src="../img/avatar/parent/1.png" alt="家长头像">
            </div>
            <div class="feedback-content">
              <div class="feedback-name">昂女士</div>
              <p class="vip-p"><img src="../img/front/vip.svg" class="vip-icon"><span class="vip-info">8</span></p>
              <p class="feedback-text">"孩子在这里学习一年多了，进步很大，老师们都很专业负责。"</p>
            </div>
          </div>
        </div>

        <div class="layui-col-md4">
          <div class="feedback-card">
            <div class="feedback-avatar">
              <img src="../img/avatar/parent/5.png" alt="家长头像">
            </div>
            <div class="feedback-content">
              <div class="feedback-name">徐女士</div>
              <p class="vip-p"><img src="../img/front/vip.svg" class="vip-icon"><span class="vip-info">8</span></p>
              <p class="feedback-text">"孩子在这里学习一年多了，进步很大，老师们都很专业负责。"</p>
            </div>
          </div>
        </div>

        <div class="layui-col-md4">
          <div class="feedback-card">
            <div class="feedback-avatar">
              <img src="../img/avatar/parent/3.png" alt="家长头像">
            </div>
            <div class="feedback-content">
              <div class="feedback-name">缪女士</div>
              <p class="vip-p"><img src="../img/front/vip.svg" class="vip-icon"><span class="vip-info">8</span></p>
              <p class="feedback-text">"孩子在这里学习一年多了，进步很大，老师们都很专业负责。"</p>
            </div>
          </div>
        </div>
      </div>
          <!-- ====================== 5.1 我也要反馈  ====================== -->
          <div class="layui-container" style="margin-top: 50px;margin-bottom: 50px">
            <input type="text" placeholder="请输入您的反馈" style="width: 300px; height: 30px;">
            <button class="layui-btn layui-btn-primary indbtn">提交</button>
          </div>
    </div>
  </div>
  <!-- ====================== 6. 购物车模块 ====================== -->
  <div id="ShoppingCart">
    <i class="layui-icon layui-icon-cart-simple icon"></i>
  </div>
  <!-- ====================== 7. 页脚模块 ====================== -->
  <div class="footer layui-fluid">
    <div class="layui-container">
      <div class="layui-row">
        <div class="layui-col-xs12">
          <p>© 2024 徐文斌 版权所有</p>
          <p>联系电话:173-6960-0067 | 地址:珠海市斗门区文斌街道</p>
        </div>
      </div>
    </div>
  </div>
  <!-- ====================== 8. 脚本引用 ====================== -->
  <script src="../layui/layui.js"></script>
  <script src="../js/front/index.js"></script>
  <script src="../js/jquery-3.7.1.js"></script>
  <script src="../js/front/ShoppingCart.js"></script>
</body>
</html>